<template>
  <div class="AreaEdit">
    <el-dialog :title="title" v-model="visible" width="500px" append-to-body>
      <el-form ref="areaRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="id" prop="Id">
          <el-input v-model="form.id" placeholder="请输入id" />
        </el-form-item>
        <el-form-item label="父区域id" prop="parentAreaId">
          <el-input v-model="form.parentAreaId" placeholder="请输入父区域id" />
        </el-form-item>
        <el-form-item label="分区名称" prop="areaName">
          <el-input v-model="form.areaName" placeholder="请输入分区名称" />
        </el-form-item>
        <el-form-item label="分区层级" prop="layerNum">
          <el-input v-model="form.layerNum" placeholder="请输入分区层级" />
        </el-form-item>
        <el-form-item label="预估用水量" prop="waterValue">
          <el-input v-model="form.waterValue" placeholder="请输入预估用水量" />
        </el-form-item>
        <el-form-item label="一级告警" prop="firstWarn">
          <el-input v-model="form.firstWarn" placeholder="请输入一级告警" />
        </el-form-item>
        <el-form-item label="二级告警" prop="secondWarn">
          <el-input v-model="form.secondWarn" placeholder="请输入二级告警" />
        </el-form-item>
        <el-form-item label="三级告警" prop="thirdWarn">
          <el-input v-model="form.thirdWarn" placeholder="请输入三级告警" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs, watch } from 'vue';

const data = reactive({
  form: {},
  rules: {
    areaName: [
      { required: true, message: "分区名称不能为空", trigger: "blur" }
    ],
  }
});
const { form, rules } = toRefs(data);

export default defineComponent({
  props: {
    initForm: {
      type: Object,
      default: () => ({})
    },
    open: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    }
  },
  emits: ['submit', 'close', 'update:open'],
  setup(props, { emit }) {
    const areaRef = ref(null);
    const visible = ref(props.open);

    // 初始化表单
    form.value = reactive({
      id: null,
      parentAreaId: null,
      areaCode: null,
      areaName: null,
      layerNum: null,
      areaGeo: null,
      lineWidth: null,
      zoneId: null,
      waterValue: null,
      firstWarn: null,
      secondWarn: null,
      thirdWarn: null,
      areaStatus: null,
      remark: null,
      recordTime: null
    });

    // 同步visible状态到父组件
    watch(visible, (newVal) => {
      emit('update:open', newVal);
    });

    // 监听对话框显示状态变化
    watch(() => props.open, (newVisible) => {
      visible.value = newVisible;
      if (newVisible) {
        Object.assign(form.value, props.initForm);
      } else {
        resetForm();
      }
    });

    // 提交表单
    const submitForm = async () => {
      try {
        await areaRef.value.validate();
        emit('submit', { ...form.value });
      } catch (error) {
        console.log('表单提交失败', error);
        return;
      }
    };

    // 取消
    const cancel = () => {
      emit('close');
      resetForm();
      visible.value = false;
    };

    // 重置表单
    const resetForm = () => {
      if (areaRef.value) {
        areaRef.value.resetFields();
      }
    };

    return {
      form,
      visible,
      areaRef,
      rules,
      submitForm,
      cancel
    };
  }
});
</script>

<style scoped>
.AreaEdit {
  margin: 10px;
}
</style>